<template>
	<view>
		<view class="top-handle">
		    <view @tap="$emit('doDay',$event)" class="prev" data-key="left">
		        <image :src="data.__wxapp_img.register.left.url"></image>
		    </view>
		    <view class="today">{{data.currentDate}}</view>
		    <view @tap="$emit('doDay',$event)" class="next" data-key="right">
		        <image :src="data.__wxapp_img.register.right.url"></image>
		    </view>
		</view>
		<view class="week">
		    <view class="weeks-day" v-for="(item,index) in data.weeks" :key="item.id">{{item.day}}</view>
		</view>
		<view class="box-flex">
		    <view class="flex-item" v-for="(vo,key) in data.currentDayList" :key="key">
		        <block v-if="vo.is_re==1">
		            <view @tap="$emit('selectDay',$event)" :class="['item-content', !data.selectCSS]" :data-day="vo.date" v-if="data.currentDay!=vo.date">
		                <image class="re_pic" :src="data.__wxapp_img.register.quan.url"></image>
		                {{vo.date}}
		            </view>
		        </block>
		        <block v-else>
		            <view @tap="$emit('selectDay',$event)" :class="['item-content', !data.selectCSS]" :data-day="vo.date" v-if="data.currentDay!=vo.date">
		                {{vo.date}}
		            </view>
		        </block>
		        <block v-if="vo.is_re==1">
		            <view @tap="$emit('selectDay',$event)" :class="['item-content', data.selectCSS]" :data-day="vo.date" v-if="data.currentDay==vo.date">
		                <image class="re_pic" :src="data.__wxapp_img.register.quan.url"></image>
		                {{vo.date}}
		            </view>
		        </block>
		        <block v-else>
		            <view @tap="$emit('selectDay',$event)" :class="['item-content', data.selectCSS]" :data-day="vo.date" v-if="data.currentDay==vo.date">
		                {{vo.date}}
		            </view>
		        </block>
		    </view>
		</view>
	</view>
</template>
<script>var myVue = {};
	export default {
		props:['data']
	}
</script>
<style scoped>
.top-handle {
    height: 80upx;
    display: flex;
    justify-content: center;
    align-items: center;
}

.week {
    height: 46upx;
    width: 700upx;
}

.prev {
    height: 50upx;
    display: flex;
    align-items: center;
    width: 50upx;
}

.prev image {
    width: 12upx;
    height: 20upx;
    margin-left: 20upx;
}

.next {
    display: flex;
    align-items: center;
    height: 50upx;
    width: 50upx;
}

.next image {
    height: 20upx;
    width: 12upx;
    margin-left: 20upx;
}

.today {
    font-size: 13px;
    font-weight: bolder;
    color: #353535;
    margin: 0 60upx;
}

.weeks-day {
    width: 100upx;
    color: #909090;
    font-size: 12px;
    float: left;
    display: flex;
    justify-content: center;
}

.box-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
}

.flex-item {
    flex-flow: nowrap;
    flex-grow: 1;
    flex-shrink: 1;
    width: 97upx;
}

.item-content {
    height: 97upx;
    color: #353535;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1upx solid #ebebeb;
    position: relative;
}

.item-content-current-day {
    flex-grow: 2;
}

.bk-color-day {
    background-color: #f7f7f7;
}
.re_pic {
    width: 97upx;
    height: 97upx;
    position: absolute;
    left: 0;
    top: 0;
}
</style>